<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2021/10/7
  Time: 16:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>

    <meta charset="UTF-8">
    <title>个人中心</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <link href="${pageContext.request.contextPath}/css/myorder.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/index.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index-1.css">
    <link href="${pageContext.request.contextPath}/css/headermenu.css" rel="stylesheet">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/image/title-img1.png">
    <style>
        /* 头部导航的 */
        .global-header .login-page-header-nav li {
            float: left;
            margin-left: 30px;
        }
        .global-header .login-page-header-nav li i {
            margin-right: 10px;
            font-size: 28px;
            line-height: 1;
            color: #f6a206;
            vertical-align: middle;
        }
        .global-login-iconfont {
            font-family: "login-iconfont",serif;
            font-style: normal;
            font-weight: normal;
            cursor: default;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            *zoom: 1;
        }
        .global-header .login-page-header-nav li span {
            font-size: 14px;
            line-height: 28px;
            color: #666;
            vertical-align: middle;
        }
    </style>
</head>

<body>
<header id="J-global-header" class="global-header">
    <div class="top-inner">
        <div id="sitenav" class="global-header-top-nav fn-clear">
            <div class="global-header-top-nav-right">
                <li class="top-nav-menu top-nav-menu-user-info" data-role="user-info" data-test="test">
                    <div class="top-nav-menu-handle">
                        <div class="login">
                            <%--                            <a href="${pageContext.request.contextPath}/login.jsp" class="J-login-btn" rel="nofollow" target="_self">登录/注册</a></div>--%>
                            <c:if test="${empty ServiceResponse}">
                                <a href="${pageContext.request.contextPath}/customer/login.jsp">登录/注册</a>
                            </c:if>

                            <c:if test="${!empty ServiceResponse}">
                                欢迎${ServiceResponse.data.custTelno}
                                <a href="${pageContext.request.contextPath}/logout">退出</a>
                            </c:if>
                        </div>
                    </div>
                </li>

                <li class="top-nav-menu top-nav-multi-menu top-nav-dl-app">
                    <div class="top-nav-menu-handle">
                        <i class="global-header-icon top-nav-dl-app-icon"></i>手机版
                    </div>
                    <div class="top-nav-menu-body top-nav-menu-qrcode">
                        <div class="top-nav-menu-bd-panel">
                            <div class="qrcode-img"></div>
                            <p>下载APP 领99元租车红包

                            </p>
                        </div>
                    </div>
                </li>

                <li class="top-nav-pipe">|</li>

                <li class="top-nav-menu top-nav-multi-menu top-nav-wx-guide">
                    <div class="top-nav-menu-handle"><i class="global-header-icon top-nav-wx-guide-icon"></i>微信</div>
                    <div class="top-nav-menu-body top-nav-menu-qrcode">
                        <div class="top-nav-menu-bd-panel">
                            <div class="qrcode-img"></div>
                            <p>扫一扫，关注微信</p>
                        </div>
                    </div>
                </li>
                <li class="top-nav-menu top-nav-multi-menu top-nav-order-lookup">
                    <div class="top-nav-menu-handle">订单查询<i class="top-nav-arrow"><em></em><span></span></i></div>
                    <div class="top-nav-menu-body top-nav-menu-list">
                        <div class="top-nav-menu-bd-panel">
                            <a href="${pageContext.request.contextPath}/center/myorder.jsp">订单查询</a>
                        </div>
                    </div>
                </li>
                <li class="top-nav-menu top-nav-multi-menu top-nav-order-lookup">
                    <div class="top-nav-menu-handle">个人中心<i class="top-nav-arrow"><em></em><span></span></i></div>
                    <div class="top-nav-menu-body top-nav-menu-list">
                        <div class="top-nav-menu-bd-panel">
                            <a href="${pageContext.request.contextPath}/center/user.jsp">进入个人中心</a>
                        </div>
                    </div>
                </li>
                <li class="top-nav-pipe">|</li>

            </div>

            <div class="global-header-top-nav-left">
                <div class="top-nav-menu top-nav-multi-menu top-nav-contact">
                    <div class="top-nav-menu-handle">
                        24小时客服！内地热线：110-120
                        <i class="top-nav-arrow"><em></em><span></span></i>
                    </div>
                    <div class="top-nav-menu-body top-nav-menu-list">
                        <div class="top-nav-menu-bd-panel">
                            <ul>
                                <li>
                                    <span class="title">中国内地热线</span>
                                    <a href="tel:10101020" target="_self" class="tel-number">110-120</a>
                                </li>
                            </ul>
                            <div class="top-nav-menu-bd-code">
                                <div class="qrcode-img"></div>
                                <p class="title">关注微信公众号</p>
                                <p class="text">可查询/修改/取消订单</p>
                                <a class="J-show-robot" href="javascript:" target="_self"
                                   data-tj="/公用头部/在线客服">24小时在线客服</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="toolbar fn-clear">
        <div id="slog" class="logo fn-left">
            <a class="sbx-logo" title="思必行-租车" target="_self" href="">

            </a>
        </div>
        <div class="toolbar-site-header-nav">
            <!--自定义一级菜单-->
            <ul class="login-page-header-nav fn-clear">
                <li><i class="global-login-iconfont">&#xe909;</i><span>有驾照就能租</span></li>
                <li><i class="global-login-iconfont">&#xe906;</i><span>地图导航</span></li>
                <li><i class="global-login-iconfont">&#xe908;</i><span>24小时服务在线</span></li>
            </ul>

            <!--系统默认-->
        </div>

    </div>
    <!--自定义二级菜单-->
</header>

<!--nav 导航-->
<div class="nav">
    <ul class="nav-wrap clear_float" id="J_NavBox">
        <li class="menu-index menu-index-on">
            <a href="${pageContext.request.contextPath}/index.jsp" target="_blank">首页</a>
            <span></span>
        </li>
        <li >
            <a href="${pageContext.request.contextPath}/selfrental/person_rentalcar.jsp" target="_blank">自驾租车</a>
            <span></span>
        </li>
        <li class>
            <a href="${pageContext.request.contextPath}/car/choosecar.jsp" target="_blank">车型查询</a>
            <span></span>
        </li>
        <li>
            <a href="${pageContext.request.contextPath}/memberrent/members.jsp" target="_blank">会员租车</a>
            <span></span>
        </li>
        <li>
            <a href="${pageContext.request.contextPath}/store/store.jsp" target="_blank">营业网点</a>
            <span></span>
        </li>
        <li>
            <a href="${pageContext.request.contextPath}/memberrent/wonderful_activity.jsp" target="_blank">精彩活动</a>
            <span></span>
        </li>


    </ul>

</div>

<!-- crumbs -->
<div id="crumbs">
    <div class="crumbs-bd">
        当前位置：
        <a href="">个人中心</a> &gt;
        订单管理
    </div>
</div>

<div id="content">
    <div class="content-bd">
        <!--站点导航 右-->
        <div class="col-main">
            <div class="invoice">
                <div class="orderdown open">
                    <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        自驾订单
                        <span class="caret"></span>
                    </button>
                </div>
                <div class="hd clearfix">
                    <!--                    <h2>自驾订单</h2>-->
                    <ul class="layui-tab layui-tab-brief paint">
                        <li class=""><a class="orderTab" href="javascript:void(0)">全部订单</a></li>
                        <li class=""><a href="javascript:void(0)">租赁中</a></li>
                        <li class=""><a href="javascript:void(0)">已完成</a></li>
                    </ul>
                </div>
                <div style="height: 450px ;border: 1px solid #e7e7e7;">
                    <table width="100%">
                        <tbody class="invoice-list"><tr>
                            <th width="18%" class="row-first-cell">订单编号</th>
                            <th width="32%">车型</th>
                            <th width="20%">取车时间</th>
                            <th width="20%">还车时间</th>
                            <th width="10%">订单状态</th>
                        </tr>
                        <tr>
                            <td class="row-first-cell">
                                <a href="/Order/MyOrders/Detail?sqs=BiursZPWExCRvpTFfOCuoS688DXQPeBe">1200635707</a>        </td>
                            <td>
                                大众高尔夫/两厢 /自动 /1.2T
                            </td>
                            <td>2021/10/11 9:00:00</td>
                            <td>2021/10/11 14:00:00</td>
                            <td>
                                <span class="gray">已取消</span>
                            </td>
                        </tr>
<%--                        <tr>--%>
<%--                            <td class="row-first-cell">--%>
<%--                                <a href="/Order/MyOrders/Detail?sqs=BiursZPWExCTcZE5wBuxAZwvM%2bQz%2bit1">1200638972</a>        </td>--%>
<%--                            <td>--%>
<%--                                大众朗逸/三厢 /自动 /1.6L--%>
<%--                            </td>--%>
<%--                            <td>2021/10/11 9:00:00</td>--%>
<%--                            <td>2021/10/13 9:00:00</td>--%>
<%--                            <td>--%>
<%--                                <span class="gray">已取消</span>--%>
<%--                            </td>--%>
<%--                        </tr>--%>
                        </tbody></table>
                    <div class="pageInfo" style="font-size: 15px;text-align: center;margin-top: 30px">

                    </div>
                </div>
<%--                <div class="invoice-list">--%>
<%--                    <div class="operate-panel">--%>
<%--                        <p>您还没有订单，现在就去订车吧！</p>--%>
<%--                        <a class="ui-btn" href="${pageContext.request.contextPath}/car/car.jsp">立即预定</a>--%>
<%--                    </div>--%>
<%--                </div>--%>

            </div>
            <div id="editor-template">
            </div>
        </div>

        <!--站点导航 左-->
        <div class="col-sub">
            <dl class="sub-nav">
                <dt>我的订单</dt>
                <dd>
                    <a class="" href="myorder.jsp">订单管理</a>
                </dd>
                <dt>我的资产</dt>
                <dd>
                    <a class="" href="">账户余额</a>
                </dd>
                <dd>
                    <a class="" href="mycoupons.jsp">我的优惠券</a>
                </dd>
                <dt>个人中心</dt>
                <dd>
                    <a class="" href="user.jsp">用户信息</a>
                </dd>
                <dd>
                    <a class="" href="">常用租车人</a>
                </dd>
                <dd>
                    <a class=" ck" href="myreceiptaddress.jsp">常用收件信息</a>
                </dd>
                <dd>
                    <a class=" ck" href="favorite.jsp">我的收藏</a>
                </dd>
                <dd>
                    <a class="" href="">申请注销账户</a>
                </dd>
            </dl>
        </div>
    </div>
</div>
<div class="footer">
    <div class="website-advantage">
        <ul class="wadvantage-list">
            <li style="width: 230px">
                <span></span>
                <p>450多座城市</p>
            </li>
            <li style="width: 230px">
                <span></span>
                <p>7000多服务网点</p>
            </li>
            <li style="width: 230px">
                <span></span>
                <p>200余种车型</p>
            </li>
            <li style="width: 230px">
                <span></span>
                <p>24小时服务</p>
            </li>

        </ul>
    </div>
</div>
<script>
    $(".paint").click(function (event) {
        var target = event.target;
        var status = target.parentElement.children[0].innerText;
        console.log(status);
        if (status=="全部订单")
            status=-1;
        if (status=="已完成")
            status=1;
        if (status=="租赁中")
            status=0;
        orderList(status,1);
    });
    orderList("-1",1);
    function orderList(status,pageNum) {
        var getStatus = status;
        var custId = "${ServiceResponse.data.custId}"
        var url='${pageContext.request.contextPath}/center/myorder';
        console.log("url:"+url);
        $.get(url,
            {
                custId:custId,
                status:status,
                pageNum:pageNum
            },
            function (result) {
                console.log("result"+JSON.stringify(result));

                $(".invoice-list").html("");
                var liEle =
                    '                        <tr>\n' +
                    '                            <th width="18%" class="row-first-cell">订单编号</th>\n' +
                    '                            <th width="20%">车型</th>\n' +
                    '                            <th width="26%">取车时间</th>\n' +
                    '                            <th width="26%">还车时间</th>\n' +
                    '                            <th width="10%">订单状态</th>\n' +
                    '                        </tr>';
                $(".invoice-list").append(liEle);

                // console.log(custId1)
                if (result.code == 200){
                    var orderArray = result.data.list;
                    console.log("order arr:"+orderArray.length)
                    for(var i = 0;i<orderArray.length;i++){
                        var orderNum = orderArray[i].myorder.orderNum;
                        var orderStartDate = orderArray[i].myorder.orderStartDate;
                        var orderEndDate = orderArray[i].myorder.orderEndDate;
                        var status = orderArray[i].myorder.status;
                        var carModel = orderArray[i].car.carModel;
                        var carSeatnum = orderArray[i].car.carSeatnum;
                        var carMatic = orderArray[i].car.carMatic;
                        var carDisplacement = orderArray[i].car.carDisplacement;
                        // if (status=="1")
                        //     status="已完成";
                        // if (status=="0")
                        //     status="租赁中";
                        <%--var custId1 = ${ServiceResponse.data.custId};--%>
                        var custId2 = orderArray[i].myorder.custId;
                        console.log(custId2);
                        if (status=="1")
                            status="已完成";
                        if (status=="0")
                            status="租赁中";
                        if (status=="3")
                            status="已取消";

                            var liEle1='<tr>\n' +
                                '                            <td class="row-first-cell">\n' +
                                '                                <a href="/Order/MyOrders/Detail?sqs=BiursZPWExCRvpTFfOCuoS688DXQPeBe">'+orderNum+'</a>        </td>\n' +
                                '                            <td>\n' +
                                carModel+'/'+carSeatnum+' 座/'+carMatic+'/' +carDisplacement+'L\n' +
                                '                            </td>\n' +
                                '                            <td>'+orderStartDate+'</td>\n' +
                                '                            <td>'+orderEndDate+'</td>\n' +
                                '                            <td>\n' +
                                '                                <span class="gray">'+status+'</span>\n' +
                                '                            </td>\n' +
                                '                        </tr>';
                            $(".invoice-list").append(liEle1);


                    }
                        $(".pageInfo").html("");
                        var prePageEle = '';
                        if (result.data.prePage != 0) {
                            prePageEle = "<a  style=\"color: #23b7b7;font-weight: bold\" href=\"javascript:orderList('" + getStatus + "','" + result.data.prePage + "')\">上一页</a>&nbsp;&nbsp;&nbsp;&nbsp;";
                        }
                        var nextPageEle = '';
                        if (result.data.pageNum != result.data.pages) {
                            nextPageEle = "<a  style=\"color: #23b7b7;font-weight: bold\" href=\"javascript:orderList('" + getStatus + "','" + result.data.nextPage + "')\">下一页</a>&nbsp;&nbsp;&nbsp;&nbsp;";
                        }
                        var currentPageEle = '当前是第' + result.data.pageNum + '页&nbsp;&nbsp;&nbsp;&nbsp;';
                        var totalPageEle = '共有' + result.data.total + '条记录，共有' + result.data.pages + '页';


                    // var pageEle = '<a href="">上一页</a>\n' +
                    //     '                当前是第xxxx页，\n' +
                    //     '                <a href="">下一页</a>\n' +
                    //     '                共有xxxx辆车，共有xxxx页';

                    $(".pageInfo").append(prePageEle);
                    $(".pageInfo").append(currentPageEle);
                    $(".pageInfo").append(nextPageEle);
                    $(".pageInfo").append(totalPageEle);
                }else {
                    $(".invoice-list").html("");
                    var liEle='<div class="operate-panel">\n' +
                        '                        <p>您还没有订单，现在就去订车吧！</p>\n' +
                        '                        <a class="ui-btn" href="${pageContext.request.contextPath}/car/car.jsp">立即预定</a>\n' +
                        '                    </div>';
                    $(".invoice-list").append(liEle);
                }
            })
    }
</script>
</body>
</html>
